<template>
  <div>
    <div class="box">
      <Homehead class="head" />
      <div class="nav">
        <van-tabs
          v-model="activeName"
          background="#e4e4e4"
          class="nav-tabs"
          sticky
        >
          <van-tab
            v-for="category in categoryList"
            :key="category.id"
            :title="category.name"
          >
            <div class="add" @click="$router.push('/addcolumn')">
              <span class="iconfont iconjiantou"></span>
            </div>
            <van-list
              v-model="category.loading"
              @load="loadMore"
              :finished="category.finished"
              :immediate-check="false"
              finished-text="没有更多了"
            >
              <Postcenter
                :Postdata="post"
                v-for="post in category.postList"
                :key="post.id"
              >
              </Postcenter>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Postcenter from "../../components/Postcenter";
import Homehead from "../../components/Homehead";
export default {
  components: { Postcenter, Homehead },
  data() {
    return {
      activeName: 0,
      //栏目列表
      categoryList: [],
    };
  },
  //栏目列表
  created() {
    if (localStorage.getItem("dellist")) {
      const res = {
        data: { data: JSON.parse(localStorage.getItem("dellist")) },
      };
      this.categoryList = res.data.data.map((item) => {
        // console.log(res.data);
        return {
          ...item, //为所有的文章内容
          //文章列表
          postList: [], //自己的文章内容
          pageIndex: 1, //当前页数
          pageSize: 6, //数据条数
          loading: false, //限制每次同时只能同时发一次请求
          finished: false, //标识所有页面已经加载完
        };
      });

      //  activeName为栏目索引
      // this.categoryList当前的栏目;
      // this.categoryList[this.activeName]当前选中的分类
      //文章列表
      // console.log(this.categoryList);
      this.loadPost();
    } else {
      this.$axios({
        url: "category",
      }).then((res) => {
        this.categoryList = res.data.data.map((item) => {
          // console.log(res.data);
          return {
            ...item, //为所有的文章内容
            //文章列表
            postList: [], //自己的文章内容
            pageIndex: 1, //当前页数
            pageSize: 6, //数据条数
            loading: false, //限制每次同时只能同时发一次请求
            finished: false, //标识所有页面已经加载完
          };
        });

        //  activeName为栏目索引
        // this.categoryList当前的栏目;
        // this.categoryList[this.activeName]当前选中的分类
        //文章列表
        // console.log(this.categoryList);
        this.loadPost();
      });
    }
  },

  watch: {
    activeName() {
      // 优化获取文章，如果文章已经获取，那么就不在重新加载
      const currentCategory = this.categoryList[this.activeName];
      if (currentCategory.postList.length == 0) {
        this.loadPost();
      }
    },
  },
  methods: {
    // 栏目操作

    // 拉到底部的加载事件
    loadMore() {
      const currentCategory = this.categoryList[this.activeName];
      currentCategory.pageIndex += 1;
      this.loadPost();
    },
    loadPost() {
      const currentCategory = this.categoryList[this.activeName];
      this.$axios({
        url: "post",
        params: {
          category: currentCategory.id,
          pageIndex: currentCategory.pageIndex, //当前页数
          pageSize: currentCategory.pageSize, //数据条数
        },
      }).then((res) => {
        currentCategory.postList = [
          ...currentCategory.postList, //旧的数据
          ...res.data.data, //新的数据
        ];
        // 加载状态结束
        currentCategory.loading = false;

        // 数据全部加载完成
        console.log(res.data);

        // console.log(currentCategory.pageSize);
        // map是映射 ...为拓展运算符
        // currentCategory.postList = res.data.data.map((item) => {
        //   return {
        //     ...item, //为所有的文章内容
        //     //文章列表
        //     postList: [], //自己的文章内容
        //   };
        // });
        if (res.data.data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  padding-top: 48/360 * 100vw;
  .jiantou {
    transform: rotate(45deg);
    .iconjiantou {
      font-size: 20/360 * 100vw;
    }
  }
  .head {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 750px;
    min-width: 320px;
    height: 20/360 * 100vw;
    // background-color: #f2f2f2;
    z-index: 9;
  }
  .nav {
    position: relative;
  }
  .add {
    position: absolute;
    top: 0/360 * 100vw;
    right: 0/360 * 100vw;
    width: 44/360 * 100vw;
    height: 38/360 * 100vw;
    background-color: #ccc;
    line-height: 38/360 * 100vw;
    text-align: center;
  }
}
</style>